Example: Displaying a Deck GL Layer with Barikoi React GL

The GeoJsonLayer in this example demonstrates how to integrate Deck GL with the react-bkoi-gl package, providing a powerful way to visualize geographic data on a map. The GeoJsonLayer is designed to render GeoJSON data on top of a Barikoi map using the MapboxOverlay from Deck GL, allowing for highly customizable map layers.

By leveraging react-bkoi-gl alongside Deck GL, this example highlights the capability to create rich, layered maps with custom geo-referenced data, enhancing mapping and geospatial applications for diverse use cases such as urban planning, transportation, and location analysis.

Example

import { useEffect, useRef, useState } from 'react';
import { GeoJsonLayer } from '@deck.gl/layers' // Import DeckGL Layer
import { MapboxOverlay } from '@deck.gl/mapbox' // Import Mapbox Overlay
import { Map, useControl } from 'react-bkoi-gl'; // Import the Barikoi React GL package
import "react-bkoi-gl/styles" // Import CSS for proper map styling

// Create DeckGL Overlay
const DeckGLOverlay = (props) => {
  const overlay = useControl(() => new MapboxOverlay(props))
  overlay.setProps(props)
  return null
}

const App = () => {
  const BARIKOI_API_KEY = 'YOUR_BARIKOI_API_KEY_HERE'
  const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${BARIKOI_API_KEY}`
  const mapContainer = useRef(null);
  const mapRef = useRef(null);
  const [data, setData] = useState(null);

  const initialViewState = {
    longitude: 90.36402,
    latitude: 23.823731,
    minZoom: 4,
    maxZoom: 30,
    zoom: 6,
    bearing: 0,
    pitch: 0,
    antialias: true
  }

  useEffect(() => {
    // Fetching GeoJSON data
    fetch('/data.json')
      .then((response) => response.json())
      .then((jsonData) => setData(jsonData))
      .catch((error) => console.error('Error loading GeoJSON data:', error));
  }, []);

  const layers = new GeoJsonLayer({
    id: 'GeoJsonLayer',
    data,
    stroked: false,
    filled: true,
    pointType: 'circle+text',
    pickable: true,
    lineWidthScale: 3,
    lineWidthMaxPixels: 5,
    lineWidthMinPixels: 1,
    getFillColor: [160, 160, 180, 200],
    wireframe: true,
  });

  return (
    <div
      ref={mapContainer} style={containerStyles}
    >
      <Map
        ref={mapRef}
        mapStyle={mapStyle}
        style={{ width: "100%", height: "100%" }}
        initialViewState={initialViewState}
        doubleClickZoom={false}
        dragRotate={false}
        attributionControl={false}
      >
        <DeckGLOverlay layers={[layers]} />
      </Map>
    </div>
  )
}

// JSX Styles
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden",
}

export default App

Example​

Example